<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>小兔鲜儿 - 新鲜 惠民 快捷!</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="renderer" content="webkit">
	<!-- <link rel="stylesheet" href="//at.alicdn.com/t/font_1939705_bgtmkonu28.css"> -->
	<link rel="stylesheet" href="./css/common.css">
	<link rel="stylesheet" href="./css/product.css">
</head>

<body>
<!-- 项部导航 -->
<div class="xtx_topnav">
	<div class="wrapper">
		<!-- 顶部导航 -->
		<ul class="xtx_navs">
			<li>
				<a href="javascript:;">请先登录</a>
			</li>
			<li>
				<a href="javascript:;">免费注册</a>
			</li>
			<li>
				<a href="javascript:;">我的订单</a>
			</li>
			<li>
				<a href="javascript:;">会员中心</a>
			</li>
			<li>
				<a href="javascript:;">帮助中心</a>
			</li>
			<li>
				<a href="javascript:;">在线客服</a>
			</li>
			<li>
				<a href="javascript:;">
					<i class="mobile sprites"></i>
					手机版
				</a>
			</li>
		</ul>
	</div>
</div>
<!-- 头部 -->
<div class="xtx_header">
	<div class="wrapper">
		<!-- 网站Logo -->
		<h1 class="xtx_logo"><a href="/">小兔鲜儿</a></h1>
		<!-- 主导航 -->
		<div class="xtx_navs">
			<ul class="clearfix">
				<li>
					<a href="javascript:;">首页</a>
				</li>
				<li>
					<a href="javascript:;">生鲜</a>
				</li>
				<li>
					<a href="javascript:;">美食</a>
				</li>
				<li>
					<a href="javascript:;">餐厨</a>
				</li>
				<li>
					<a href="javascript:;">电器</a>
				</li>
				<li>
					<a href="javascript:;">居家</a>
				</li>
				<li>
					<a href="javascript:;">洗护</a>
				</li>
				<li>
					<a href="javascript:;">孕婴</a>
				</li>
				<li>
					<a href="javascript:;">服装</a>
				</li>
			</ul>
		</div>
		<!-- 站内搜索 -->
		<div class="xtx_search clearfix">
			<!-- 购物车 -->
			<a href="javascript:;" class="xtx_search_cart sprites">
				<i>2</i>
			</a>
			<!-- 搜索框 -->
			<div class="xtx_search_wrapper">
				<input type="text" placeholder="搜一搜" onclick="location.href='./search.html'">
			</div>
		</div>
	</div>
</div>
<div class="xtx-wrapper">
	<div class="container">
		<!-- 面包屑 -->
		<div class="xtx-bread">
			<a href="javascript:;"> 首页 > </a>
			<a href="javascript:;"> 电子产品 > </a>
			<a href="javascript:;"> 电视 > </a>
			<span>小米电视4A 32英寸</span>
		</div>
		<!-- 商品信息 -->
		<div class="xtx-product-info">
			<div class="left">
				<div class="pictrue">
					<div class="middle">
						<img src="./images/1.jpg" alt="">
						<div class="layer"></div>
					</div>
					<div class="small">
						<ul>
							<li class="active"><img src="./images/1.jpg" alt=""></li>
							<li><img src="./images/2.jpg" alt=""></li>
							<li><img src="./images/3.jpg" alt=""></li>
							<li><img src="./images/4.jpg" alt=""></li>
							<li><img src="./images/5.jpg" alt=""></li>
						</ul>
					</div>
					<div class="large"></div>
				</div>
				<div class="other">
					<ul>
						<li>
							<p>销量人气</p>
							<p>1999+</p>
							<p>销量人气</p>
						</li>
						<li>
							<p>商品评价</p>
							<p>999+</p>
							<p>查看评价</p>
						</li>
						<li>
							<p>收藏人气</p>
							<p>299+</p>
							<p><a href="javascript:;">收藏商品</a></p>
						</li>
						<li>
							<p>品牌信息</p>
							<p>小米</p>
							<p><a href="javascript:;">品牌主页</a></p>
						</li>
					</ul>
				</div>
			</div>
			<div class="right">
				<h3 class="name">小米电视4A 32英寸</h3>
				<p class="desc">全面屏设计 / 高清分辨率 / 海量内容 / 1G+4G大内存 / 多核处理器</p>
				<p class="price"><span class="now">¥1899</span><span class="old">¥2999</span></p>
				<div class="address">
					<div class="item">
						<div class="dt">促销</div>
						<div class="dd">12月好物放送，App领券购买直降120元</div>
					</div>
					<div class="item">
						<div class="dt">配送</div>
						<div class="dd">至
							<div class="box">
								<span>陕西 西安 <i></i></span>
							</div>
						</div>
					</div>
					<div class="item">
						<div class="dt">服务</div>
						<div class="dd">
							<span class="fw">无忧退货</span>
							<span class="fw">快速退款</span>
							<span class="fw">免费包邮</span>
							<a href="#" class="lj">了解详情</a>
						</div>
					</div>
				</div>
				<div class="attrs">
					<div class="item">
						<div class="dt">颜色</div>
						<div class="dd">
							<img src="./uploads/img/cate-06.png" alt="">
							<img src="./uploads/img/cate-07.png" alt="">
						</div>
					</div>
					<div class="item">
						<div class="dt">颜色</div>
						<div class="dd">
							<span class="size">22英寸</span>
							<span class="size">42英寸</span>
							<span class="size">52英寸</span>
							<span class="size">62英寸</span>
						</div>
					</div>
					<div class="item">
						<div class="dt">数量</div>
						<div class="dd">
							<div class="num">
								<a href="javascript:;">-</a>
								<input type="text" value="1">
								<a href="javascript:;">+</a>
							</div>
						</div>
					</div>
					<div class="item">
						<a class="buy" href="javascript:;">立即购买</a>
					</div>
				</div>
			</div>
		</div>
		<!-- 同类产品推荐 -->
		<div class="xtx-relevant-product">
			<h3>同类产品推荐</h3>
			<ul>
				<li>
					<a href="#">
						<img src="./uploads/history_goods_1.jpg" alt="">
						<p class="name">USB Type C数据线</p>
						<p class="desc">快速充电，稳定传输</p>
						<p class="price">¥39</p>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="./uploads/history_goods_2.jpg" alt="">
						<p class="name">红米Note 5A 高配版</p>
						<p class="desc">1600万像素柔光自拍</p>
						<p class="price">¥1899</p>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="./uploads/history_goods_3.jpg" alt="">
						<p class="name">VGA网口多功能转接器</p>
						<p class="desc">小巧便携，节省桌面空间</p>
						<p class="price">¥19</p>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="./uploads/history_goods_4.jpg" alt="">
						<p class="name">笔记本Pro 15.6"</p>
						<p class="desc">全金属强化机身搭配独显</p>
						<p class="price">¥4899</p>
					</a>
				</li>
			</ul>
			<a href="javascript:;" class="prev"><span class="iconfont icon-angle-left"></span></a>
			<a href="javascript:;" class="next"><span class="iconfont icon-angle-right"></span></a>
		</div>
		<!-- 商品详情 -->
		<div class="xtx-product-detail">
			<div class="main">
				<div class="cont">
					<div class="tab-head">
						<a href="javascript:;">商品详情</a>
						<a href="javascript:;">商品评价<span>（998+）</span></a>
					</div>
					<div class="tab-pane">
						<!-- 静态属性 -->
						<div class="attrs">
							<div class="item"><span>商品名称：</span><span>小米L32M5-AZ </span></div>
							<div class="item"><span>商品编号：</span><span>4620979 </span></div>
							<div class="item"><span>商品毛重：</span><span>8.0kg </span></div>
							<div class="item"><span>商品产地：</span><span>中国大陆 </span></div>
							<div class="item"><span>屏幕尺寸：</span><span>32英寸及以下 </span></div>
							<div class="item"><span>能效等级：</span><span>三级能效 </span></div>
							<div class="item"><span>电视类型：</span><span>人工智能 </span></div>
							<div class="item"><span>选购指数：</span><span>6.9-6.0 </span></div>
							<div class="item"><span>观看距离：</span><span>2m以下（≤32英寸）</span></div>
						</div>
						<!-- 详情内容 -->
						<div class="detail">
							<img src="https://yanxuan-item.nosdn.127.net/39d7f2407c90d0442566a719146ee9c1.jpg" alt=""
								 data-v-2c43c764=""><img
								src="https://yanxuan-item.nosdn.127.net/7dfee58e7c6b3996badf368610ed62b1.jpg"
								alt="" data-v-2c43c764=""><img
								src="https://yanxuan-item.nosdn.127.net/d1acff1a29bddd21c2ad337d892a9f7c.jpg" alt=""
								data-v-2c43c764=""><img
								src="https://yanxuan-item.nosdn.127.net/ac722b04b2014ac337d8db695ee46f0c.jpg"
								alt="" data-v-2c43c764=""><img
								src="https://yanxuan-item.nosdn.127.net/c63e36faa0848ee37c825897f5cec179.jpg" alt=""
								data-v-2c43c764=""><img
								src="https://yanxuan-item.nosdn.127.net/e0f13dbf14c8a2f07e86bf3df3ca002b.jpg"
								alt="" data-v-2c43c764="">
						</div>
					</div>
					<div class="tab-pane" style="display: none;">评价</div>
				</div>
				<!-- 注意事项 -->
				<div class="warn">
					<h3>注意事项</h3>
					<p class="tit">• 购买运费如何收取？ </p>
					<p>
						单笔订单金额(不含运费)满88元免邮费；不满88元，每单收取10元运费。（港澳台地区需满500元免邮费；不满500元，每单收取30元运费) </p>
					<br>
					<br>
					<p class="tit">• 使用什么快递发货? </p>
					<p>默认使用顺丰快递发货(个别商品使用其他快递） </p>
					<p>配送范围覆盖全国大部分地区(港澳台地区除外）。 </p>
					<br>
					<br>
					<p class="tit">• 如何申请退货? </p>
					<p>
						1.自收到商品之日起30日内，顾客可申请无忧退货，退款将原路返还，不同的银行处理时间不同，预计1-5个工作日到账； </p>
					<p>2.内裤和食品等特殊商品无质量问题不支持退货； </p>
					<p>3.退货流程： 确认收货-申请退货-客服审核通过-用户寄回商品-仓库签收验货-退款审核-退款完成； </p>
					<p>
						4.因小兔鲜儿产生的退货，如质量问题，退货邮费由小兔鲜儿承担，退款完成后会以现金券的形式报销。因客户个人原因产生的退货，购买和寄回运费由客户个人承担。</p>
				</div>
			</div>
			<div class="aside">
				<div class="tit">24小时热销榜</div>
				<div class="product">
					<img src="./uploads/fresh_goods_3.jpg" alt="">
					<p class="name">USB Type C数据线</p>
					<p class="desc">快速充电，稳定传输</p>
					<p class="price">¥29</p>
				</div>
				<div class="product">
					<img src="./uploads/fresh_goods_3.jpg" alt="">
					<p class="name">USB Type C数据线</p>
					<p class="desc">快速充电，稳定传输</p>
					<p class="price">¥29</p>
				</div>
				<div class="product">
					<img src="./uploads/fresh_goods_3.jpg" alt="">
					<p class="name">USB Type C数据线</p>
					<p class="desc">快速充电，稳定传输</p>
					<p class="price">¥29</p>
				</div>
				<div class="tit">专题推荐</div>
				<div class="special">
					<img src="./uploads/discuss_goods_1.jpg" alt="">
					<p class="name">一往无前，诞生于崛起</p>
				</div>
				<div class="special">
					<img src="./uploads/discuss_goods_1.jpg" alt="">
					<p class="name">一往无前，诞生于崛起</p>
				</div>
				<div class="special">
					<img src="./uploads/discuss_goods_1.jpg" alt="">
					<p class="name">一往无前，诞生于崛起</p>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- 公共底部 -->
<div class="xtx_footer clearfix">
	<div class="wrapper">
		<!-- 联系我们 -->
		<div class="contact clearfix">
			<dl>
				<dt>客户服务</dt>
				<dd class="chat">在线客服</dd>
				<dd class="feedback">问题反馈</dd>
			</dl>
			<dl>
				<dt>关注我们</dt>
				<dd class="weixin">公众号</dd>
				<dd class="weibo">微博</dd>
			</dl>
			<dl>
				<dt>下载APP</dt>
				<dd class="qrcode">
					<img src="./uploads/qrcode.jpg">
				</dd>
				<dd class="download">
					<span>扫描二维码</span>
					<span>立马下载APP</span>
					<a href="javascript:;">下载页面</a>
				</dd>
			</dl>
			<dl>
				<dt>服务热线</dt>
				<dd class="hotline">
					400-0000-000
					<small>周一至周日 8:00-18:00</small>
				</dd>
			</dl>
		</div>
	</div>
	<!-- 其它 -->
	<div class="extra">
		<div class="wrapper">
			<!-- 口号 -->
			<div class="slogan">
				<a href="javascript:;" class="price">价格亲民</a>
				<a href="javascript:;" class="express">物流快捷</a>
				<a href="javascript:;" class="quality">品质新鲜</a>
			</div>
			<!-- 版权信息 -->
			<div class="copyright">
				<p>
					<a href="javascript:;">关于我们</a>
					<a href="javascript:;">帮助中心</a>
					<a href="javascript:;">售后服务</a>
					<a href="javascript:;">配送与验收</a>
					<a href="javascript:;">商务合作</a>
					<a href="javascript:;">搜索推荐</a>
					<a href="javascript:;">友情链接</a>
				</p>
				<p>CopyRight &copy; 小兔鲜儿</p>
			</div>
		</div>
	</div>
</div>
<script>
    // // 1. 获取三个盒子
    // // 2. 小盒子 图片切换效果
    // const small = document.querySelector('.small')
    // //  中盒子
    // const middle = document.querySelector('.middle')
    // //  大盒子
    // const large = document.querySelector('.large')
    // // 2. 事件委托
    // small.addEventListener('mouseover', function (e) {
    //   if (e.target.tagName === 'IMG') {
    //     // console.log(111)
    //     // 排他 干掉以前的 active  li 上面
    //     this.querySelector('.active').classList.remove('active')
    //     // 当前元素的爸爸添加 active
    //     e.target.parentNode.classList.add('active')
    //     // 拿到当前小图片的 src
    //     // console.log(e.target.src)
    //     // 让中等盒子里面的图片，src 更换为   小图片src
    //     middle.querySelector('img').src = e.target.src
    //     // 大盒子更换背景图片
    //     large.style.backgroundImage = `url(${e.target.src})`
    //   }
    // })
    //
    //
    // // 3. 鼠标经过中等盒子， 显示隐藏 大盒子
    // middle.addEventListener('mouseenter', show)
    // middle.addEventListener('mouseleave', hide)
    // let timeId = null
    // // 显示函数 显示大盒子
    // function show() {
    //   // 先清除定时器
    //   clearTimeout(timeId)
    //   large.style.display = 'block'
    // }
    // // 隐藏函数 隐藏大盒子
    // function hide() {
    //   timeId = setTimeout(function () {
    //     large.style.display = 'none'
    //   }, 200)
    // }
    //
    //
    // // 4. 鼠标经过大盒子， 显示隐藏 大盒子
    // large.addEventListener('mouseenter', show)
    // large.addEventListener('mouseleave', hide)
    //
    //
    // // 5. 鼠标经过中等盒子，显示隐藏 黑色遮罩层
    // const layer = document.querySelector('.layer')
    // middle.addEventListener('mouseenter', function () {
    //   layer.style.display = 'block'
    // })
    // middle.addEventListener('mouseleave', function () {
    //   layer.style.display = 'none'
    // })
    // // 6.移动黑色遮罩盒子
    // middle.addEventListener('mousemove', function (e) {
    //   // let x = 10, y = 20
    //   // console.log(11)
    //   // 鼠标在middle 盒子里面的坐标 = 鼠标在页面中的坐标 - middle 中等盒子的坐标
    //   // console.log(e.pageX)鼠标在页面中的坐标
    //   // middle 中等盒子的坐标
    //   // console.log(middle.getBoundingClientRect().left)
    //   let x = e.pageX - middle.getBoundingClientRect().left
    //   let y = e.pageY - middle.getBoundingClientRect().top - document.documentElement.scrollTop
    //   // console.log(x, y)
    //   // 黑色遮罩移动 在 middle 盒子内 限定移动的距离
    //   if (x >= 0 && x <= 400 && y >= 0 && y <= 400) {
    //     // 黑色盒子不是一直移动的
    //     // 声明2个变量 黑色盒子移动的 mx my变量
    //     let mx = 0, my = 0
    //     if (x < 100) mx = 0
    //     if (x >= 100 && x <= 300) mx = x - 100
    //     if (x > 300) mx = 200
    //
    //     if (y < 100) my = 0
    //     if (y >= 100 && y <= 300) my = y - 100
    //     if (y > 300) my = 200
    //
    //     layer.style.left = mx + 'px'
    //     layer.style.top = my + 'px'
    //     // 大盒子的背景图片要跟随 中等盒子移动  存在的关系是 2倍
    //     large.style.backgroundPositionX = -2 * mx + 'px'
    //     large.style.backgroundPositionY = -2 * my + 'px'
    //   }
    // })

    const small = document.querySelector('.small')
    const middle = document.querySelector('.middle')
    const large = document.querySelector('.large')
    const layer = document.querySelector('.layer')
    // 给小盒子添加效果同时让中等盒子对应显示
    small.addEventListener('mouseover', function (e) {
        if (e.target.tagName === 'IMG') {
            this.querySelector('.active').classList.remove('active')
            e.target.parentNode.classList.add('active')
            middle.querySelector('img').src = e.target.src
            large.style.backgroundImage = `url(${e.target.src})`
        }
    })
    // 鼠标进入middle盒子large盒子显示  鼠标离开middle盒子large盒子延迟200ms隐藏
    // 当鼠标进入middle盒子时黑色mask显示
    middle.addEventListener('mouseenter', view)
    middle.addEventListener('mouseleave', hide)

    let time = null

    // view函数
    function view() {
        clearTimeout(time)
        large.style.display = 'block'
        layer.style.display = 'block'
    }

    // hide函数
    function hide() {

        time = setTimeout(function () {
            large.style.display = 'none'
            layer.style.display = 'none'
        }, 200)
    }

    // 鼠标进入large盒子 large盒子显示  鼠标离开large盒子 large盒子延迟200ms隐藏
    large.addEventListener('mouseenter', view)
    large.addEventListener('mouseleave', hide)

	middle.addEventListener('mousemove', function (e) {
		let x = e.pageX - middle.getBoundingClientRect().left
		let y = e.pageY - middle.getBoundingClientRect().top - document.documentElement.scrollTop
		let mx = 0, my = 0
		if (x < 100) mx = 0
		if (x >= 100 && x < 300) mx = x - 100
		if (x >= 300) mx = 200
		if (y < 100) my = 0
		if (y >= 100 && y < 300) my = y - 100
		if (y >= 300) my = 200
		layer.style.left = mx + 'px'
		layer.style.top = my + 'px'

		// large对应放大效果
		large.style.backgroundPositionX = -2 * mx + 'px'
		large.style.backgroundPositionY = -2 * my + 'px'
 	})
</script>
</body>

</html>